<template>
    <div class="body shopCartbox">
        <!-- 购物车列表 -->
        <div class="cart_list" v-if="JSON.stringify(shopCartInfo) != '{}'">
            <!--购物车没有商品-s-->
            <div class="nonenothing" v-if="shopCartInfo.cart_list.length == 0">
                <img src="../../assets/images/nothing.png" />
                <p>你的购物车空空如也~</p>
                <a @click="$router.push('/shop')">去逛逛</a>
            </div>
            <!--购物车没有商品-e-->

            <div class="z_cart_wrap" v-if="shopCartInfo.cart_list.length > 0">
                <div
                    class="orderlistshpop p"
                    v-for="(item, index) in shopCartInfo.cart_list"
                    :key="index"
                >
                    <div class="maleri30 Set-meal-wrap h-smw">
                        <!--商品列表-s-->
                        <div class="sc_list">
                            <div class="radio fl">
                                <!--商品勾选按钮-->
                                <span
                                    @click="changeIsCheck(item.id)"
                                    class="che"
                                    :class="{ check_t: item.isCheck }"
                                >
                                    <i> </i>
                                </span>
                            </div>
                            <div class="shopimg fl">
                                <a
                                    @click="
                                        $router.push({
                                            path: '/shopDetail',
                                            query: { id: item.goods_id },
                                        })
                                    "
                                >
                                    <!--商品图片-->
                                    <img :src="item.image_link" />
                                </a>
                            </div>
                            <div class="deleshow fr">
                                <div class="deletes">
                                    <!--商品名-->
                                    <span class="similar-product-text fl">
                                        <a
                                            @click="
                                                $router.push({
                                                    path: '/shopDetail',
                                                    query: {
                                                        id: item.goods_id,
                                                    },
                                                })
                                            "
                                            >{{ item.goods_name }}
                                        </a>
                                    </span>
                                    <!--删除按钮-->
                                    <a
                                        class="delescj deleteGoods"
                                        @click="deleShop(item.id)"
                                        ><img
                                            src="../../assets/images/dele.png"
                                    /></a>
                                </div>
                                <!--商品属性，规格-->
                                <p class="weight">{{ item.spec_key_name }}</p>
                                <div class="prices">
                                    <p class="sc_pri fl">
                                        <!--商品单价-->
                                        <span id="cart_7_member_goods_price"
                                            ><em>￥</em
                                            >{{
                                                item.member_goods_price.split(
                                                    '.'
                                                )[0]
                                            }}<em
                                                >.{{
                                                    item.member_goods_price.split(
                                                        '.'
                                                    )[1]
                                                }}</em
                                            ></span
                                        >
                                    </p>
                                    <!--加减数量-->
                                    <div class="plus fr get_mp">
                                        <span
                                            class="mp_minous"
                                            @click="
                                                changeNum(
                                                    item.id,
                                                    item.goods_num,
                                                    false
                                                )
                                            "
                                            >-</span
                                        >
                                        <span class="mp_mp">
                                            <input
                                                name="changeQuantity_7"
                                                type="text"
                                                class="input-num"
                                                v-model="item.goods_num"
                                            />
                                        </span>
                                        <span
                                            class="mp_plus"
                                            @click="
                                                changeNum(
                                                    item.id,
                                                    item.goods_num,
                                                    true
                                                )
                                            "
                                            >+</span
                                        >
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--商品列表-e-->
                    </div>
                </div>
            </div>
        </div>

        <!-- 热卖商品start -->
        <div class="hotshop seehotsho">
            <div class="thirdlogin">
                <h4>看看热卖</h4>
            </div>
        </div>
        <div class="floor guesslike">
            <div class="likeshop">
                <ul>
                    <li
                        v-for="(item, index) in shopCartInfo.hot_goods"
                        :key="index"
                    >
                        <a
                            @click="
                                $router.push({
                                    path: '/shopDetail',
                                    query: { id: item.goods_id },
                                })
                            "
                        >
                            <div class="similer-product">
                                <img :src="item.image_link" />
                                <span class="similar-product-text">{{
                                    item.goods_name
                                }}</span>
                                <span class="similar-product-price">
                                    ¥<span class="big-price">{{
                                        item.shop_price
                                    }}</span>
                                    <!--<span class="small-price">.00</span>-->
                                </span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="add">热卖商品实时更新，常回来看看哟~</div>
        </div>
        <!-- 热卖商品end -->

        <!-- 底部结算按钮start -->
        <div class="payit ma-to-20 payallb" style="margin-bottom: 2.7093rem">
            <div class="fl alllef">
                <div class="radio fl" @click="isCheckShopAll()">
                    <span
                        class="che alltoggle checkFull"
                        :class="{ check_t: isCheckAll }"
                    >
                        <i></i>
                    </span>
                    <span class="all">全选</span>
                </div>
                <div class="youbia">
                    <p>
                        <span class="pmo">合计：</span><span>￥</span
                        ><span id="total_fee">{{
                            totalData.price | money
                        }}</span>
                    </p>
                    <p class="lastime">
                        <span id="goods_fee"
                            >节省：￥{{ totalData.goods_fee | money }}</span
                        >
                    </p>
                </div>
            </div>
            <div class="fr">
                <a href="javascript:void(0);" @click="cart_submit()">去结算</a>
            </div>
        </div>
        <!-- 底部结算按钮end -->

        <div class="zhanwei"></div>
    </div>
</template>

<script>
import { axiosPost } from '../../axios';
import { Toast, Dialog } from 'vant';
export default {
    name: '',
    data() {
        return {
            shopCartInfo: {},
            totalData: {
                price: 0,
                totalNum: 0,
            },
            isCheckAll: true,
        };
    },
    computed: {},
    mounted() {
        this.getShopCarInfo();
    },
    methods: {
        // 去结算
        cart_submit() {
            sessionStorage.removeItem('goodinfo');
            this.$router.push('/shopSubmit');
        },
        // 计算节省多少钱
        shopFee(feeList) {
            axiosPost(
                'api/cart/AsyncUpdateCart',
                {
                    cart: feeList,
                },
                (res) => {
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    this.totalData = {
                        price: res.result.cart_price_info.total_fee,
                        totalNum: res.result.cart_price_info.goods_num,
                        goods_fee: res.result.cart_price_info.goods_fee,
                    };
                }
            );
        },
        // 是否全选
        isCheckShopAll() {
            let checklength = this.shopCartInfo.cart_list.length;
            let newchecklength = 0;

            this.shopCartInfo.cart_list.forEach((item) => {
                if (item.isCheck == true) {
                    newchecklength++;
                }
            });

            // 有没选中的
            if (checklength != newchecklength) {
                this.shopCartInfo.cart_list = this.shopCartInfo.cart_list.map(
                    (item) => {
                        item.isCheck = true;
                        return item;
                    }
                );
                this.isCheckAll = true;
            }
            // 全都选中了
            else {
                this.shopCartInfo.cart_list = this.shopCartInfo.cart_list.map(
                    (item) => {
                        item.isCheck = false;
                        return item;
                    }
                );
                this.isCheckAll = false;
            }

            this.ComputesShop(); // 计算商品总价格，总数量
        },
        // 计算商品总数量
        ComputesShop() {
            let feeList = [];
            this.shopCartInfo.cart_list.forEach((item) => {
                feeList.push({
                    goods_num: item.goods_num,
                    id: item.id,
                    selected: item.isCheck == true ? 1 : 0,
                });
            });
            this.shopFee(feeList);
        },
        // 商品数量加减
        changeNum(id, goods_num, type) {
            if (type) {
                goods_num++;
            } else {
                if (goods_num <= 1) {
                    return;
                } else {
                    goods_num--;
                }
            }
            axiosPost(
                '/api/cart/changeNum',
                {
                    id: id,
                    goods_num: goods_num,
                },
                (res) => {
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    // console.log(res);
                    this.shopCartInfo.cart_list =
                        this.shopCartInfo.cart_list.map((item) => {
                            if (item.id == id) {
                                item.goods_num = goods_num;
                            }
                            return item;
                        });
                    this.ComputesShop(); // 计算商品总价格，总数量
                }
            );
        },
        // 删除商品
        deleShop(cart_ids) {
            // console.log(cart_ids);
            Dialog.confirm({
                title: '',
                message: '您真的要删除该商品吗？',
            })
                .then(() => {
                    axiosPost(
                        '/api/cart/delete',
                        {
                            cart_ids: cart_ids,
                        },
                        (res) => {
                            Toast({
                                message: res.msg,
                                duration: 2000,
                            });
                            if (res.status != 1) {
                                return;
                            }
                            let cart_listCopy =
                                this.shopCartInfo.cart_list.concat();
                            cart_listCopy.forEach((element, index) => {
                                if (element.id == cart_ids) {
                                    cart_listCopy.splice(index, 1);
                                }
                            });
                            this.shopCartInfo.cart_list = cart_listCopy;
                            this.ComputesShop(); // 计算商品总价格，总数量
                        }
                    );
                })
                .catch(() => {
                    // on cancel
                });
        },
        // 切换是否选中该商品
        changeIsCheck(id) {
            let alllenth = 0;
            this.shopCartInfo.cart_list = this.shopCartInfo.cart_list.map(
                (item) => {
                    if (item.id == id) {
                        item.isCheck = !item.isCheck;
                    }
                    if (item.isCheck) {
                        alllenth++;
                    }
                    return item;
                }
            );

            // 全选操作
            if (alllenth == this.shopCartInfo.cart_list.length) {
                this.isCheckAll = true;
            } else {
                this.isCheckAll = false;
            }
            this.ComputesShop(); // 计算商品总价格，总数量
        },
        // 获取购物车信息
        getShopCarInfo() {
            axiosPost('/api/cart/index', {}, (res) => {
                if (res.status != 1) {
                    return Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                }
                this.shopCartInfo = res.data;
                this.shopCartInfo.cart_list = res.data.cart_list.map((item) => {
                    item.isCheck = true;
                    return item;
                });

                this.ComputesShop(); // 计算商品总价格，总数量

                // console.log(JSON.parse(JSON.stringify(this.shopCartInfo)));
            });
        },
    },
};
</script>

<style lang="less" scope>
.shopCartbox {
    .get_mp span.disable {
        cursor: default;
        color: #e9e9e9;
    }
    .guesslike ul li:nth-child(2n + 1) {
        padding-right: 0.04267rem;
    }
    .guesslike ul li {
        float: left;
        width: 50%;
        position: relative;
    }
    .guesslike ul li:nth-child(2n + 1) .similer-product {
        float: right;
    }
    .guesslike ul li .similer-product {
        background-color: #fff;
        clear: both;
        overflow: hidden;
        display: block;
        padding-bottom: 0.42667rem;
        width: 100%;
    }
    .guesslike ul li .similer-product img {
        width: 7.95733rem;
        height: 7.68rem;
    }
    .payallb {
        height: 2.05rem;
        background-color: #fff;
    }
    .radio i {
        width: 0.85rem;
        height: 0.85rem;
        border-radius: 50%;
        border: solid 0.04rem #999999;
        background: none;
    }
    .payallb {
        padding-left: 1.02rem;
    }
    /*.payit .alllef{*/
    /*width: 10.71rem;*/
    /*}*/
    .payallb .alllef .radio {
        margin: 0;
        padding-top: 0.66rem;
    }
    .payallb .alllef .radio .all {
        margin-left: 0.58rem;
        color: #666666;
    }
    .payallb .youbia {
        width: 8.17rem;
    }
    .payit .fl p .pmo {
        font-size: 0.64rem;
        font-weight: 500;
    }
    .payit .fl p span {
        font-weight: bold;
    }
    .payit .fl .lastime span {
        font-size: 0.47rem;
        color: #1e1e1e;
        font-weight: 400;
    }
    .payallb .youbia p {
        padding-right: 0.55rem;
    }
    .payit .fr {
        width: 4.27rem;
    }
    .payit .fr a {
        height: 2.05rem;
        line-height: 2.05rem;
        font-size: 0.64rem;
    }
    .Set-meal-wrap {
        margin: 0.43rem !important;
        background-color: #fff;
        width: 15.15rem;
        border-radius: 0.21rem;
        padding: 0;
    }
    .orderlistshpop-titles {
        height: 1.792rem;
        line-height: 1.792rem;
    }
    .orderlistshpop-titles p {
        line-height: 2.04rem;
        padding: 0;
        font-weight: bold;
    }
    .r-first {
        width: 0.85rem;
        margin-right: 0.62rem;
        padding: 0.6rem 0;
    }
    .radio .dapei_icon_s {
        width: 0.85rem;
        height: 0.85rem;
    }
    .radio .check_t .dapei_icon_s {
        width: 0.85rem;
        height: 0.85rem;
        border-radius: 50%;
        margin: 0;
        background: url(../../assets/images/ck2.png) no-repeat 100% 100%;
        border: 1px solid #f32c2c;
    }
    .sc_list {
        padding: 0;
        border: none;
    }
    .sc_list .shopimg img {
        width: 3.43rem;
        height: 3.43rem;
    }
    .radio .check_t .dapei_icon_b {
        width: 0.85rem;
        height: 0.85rem;
        border-radius: 50%;
        margin: 0;
        background: url(/template/mobile/rainbow/static/images/ck2.png)
            no-repeat 100% 100%;
        border: none;
    }
    .radio .dapei_icon_b {
        width: 0.85rem;
        height: 0.85rem;
        background-color: #ffffff;
        border: 1px solid #999;
    }
    .radio i {
        margin: 0;
        background-size: 100% 100% !important;
    }
    .orderlistshpop-titles {
        padding: 0 0.58rem;
    }
    .maleri30 {
        margin: 0 0.58rem;
        margin-right: 0;
        padding-top: 0.34rem;
        padding-bottom: 0.85rem;
    }
    .sc_list .radio {
        margin-right: 0.6rem;
    }
    .sc_list .deleshow {
        width: 8.66rem;
        margin-right: 0.58rem;
    }
    .sc_list .deleshow .deletes .similar-product-text {
        font-size: 0.55rem;
        color: #181818;
        font-weight: 500;
        margin: 0;
    }
    .sc_list .deleshow .weight {
        font-size: 0.47rem;
        line-height: 1.0667rem;
        bottom: 1.6rem;
        right: 0.7rem;
        width: 8.94rem;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
    }
    .sc_list .deleshow .prices .sc_pri {
        margin: 0;
        font-size: 0.64rem;
        font-weight: bold;
    }
    .sc_list .deleshow .prices {
        margin-top: 0.85rem;
    }
    .mp_price_i {
        line-height: 0.7rem;
    }
    .mun-two span.h-mp {
        line-height: 0;
    }
    .price-foots .price-foot-two {
        font-size: 0.43rem;
        color: #ff2a2a;
        border: solid 0.02rem #ff3939;
        background-color: #ffffff;
        padding: 0.13rem 0.28rem;
        border-radius: 0.64rem;
        margin: 0;
        line-height: 0.43rem;
    }
    .plus span {
        border: none;
    }
    .plus span input.input-num {
        background-color: #f3f3f3;
        width: 1.71rem;
        height: 0.94rem;
        padding: 0;
        color: #1c1c1c;
        font-weight: bold;
    }
    .get_mp span.mp_minous {
        font-size: 0.77rem;
        width: 0.8rem;
        color: #1c1c1c;
    }
    .get_mp span.mp_plus {
        color: #1c1c1c;
        font-size: 0.77rem;
        width: 0.8rem;
        font-weight: bold;
    }
    .h-smw {
        padding-left: 0.6rem;
    }
    .sc_list .deleshow .prices .plus {
        font-weight: bold;
        color: #1c1c1c;
    }
    .sc_list .deleshow .prices .sc_pri em {
        font-size: 0.47rem;
    }
    .z_cart_wrap {
        padding: 0;
        border: 0;
    }
    .radio .check_t i {
        background: url(../../assets/images/cgood.png);
        border: none;
    }
    .guesslike ul li .similer-product img {
        width: 7.68rem;
    }
    .guesslike ul li .similer-product {
        width: 7.68rem;
        height: 10.4rem;
        position: relative;
    }
    .guesslike ul li {
        width: 7.68rem;
        margin: 0 0.2rem 0.2rem 0;
    }
    .guesslike ul li:nth-child(2n + 1) {
        padding: 0;
        margin-left: 0.2rem;
    }
    .guesslike .likeshop span {
        vertical-align: bottom;
    }
    .content {
        margin: 0;
    }

    .Set-meal-wrap {
        border-bottom: 0rem solid #f3f5f7;
    }
    .guesslike ul:after {
        content: '';
        display: block;
        clear: both;
    }
    .similar-product-text {
        margin-top: 0.3rem;
    }
    .similar-product-text {
        height: auto !important;
        margin-bottom: 0.3rem;
    }
    .similar-product-price {
        position: absolute;
        left: 0;
        bottom: 0.4rem;
        font-weight: 800;
    }
}
</style>
